<template>
	<view>
		<image src="../../static/logo-2.png" mode="widthFix" class="logo"></image>
		<view class="register-container">
			<view class="getyzms">
				<input placeholder="请输入手机号码" class="register-code" maxlength="11" type="number" v-model="registerCode" confirm-type="done"
				 @blur="overiphone(registerCode)" />
				 <input placeholder="请输入密码" class="register-code" maxlength="20"  v-model="userpassword" confirm-type="done"
				  @blur="overpassword(userpassword)" />
				<text @tap="submit" :class="{getregain: isshow}">获取验证码</text>
			</view>
			<view class="key-input">
				<!-- <view class="tips">验证码已发送至 +{{registerCode}}</view> -->
				<u-message-input :class="{yzm:yzmshow}" :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
				 :maxlength="maxlength"></u-message-input>

				<text :class="{ noCaptcha: show }" @tap="noCaptcha">收不到验证码点这里</text>
				<text :class="{ newregainshow: newregainshow }">{{ second }}秒后重新获取验证码</text>
				<text :class="{ error: error }">验证码错误，请重新输入</text>
			</view>
			<!-- <button @tap="login"  class="register-btn">登陆</button> -->
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				registerCode: '', //用户手机号
				maxlength: 4,
				value: '',
				second: 300,
				show: false,
				error: false,
				isshow: false,
				yzmshow: true,
				newregainshow: false,
				selectCode: '', //短信验证码
				userpassword:''  //用户密码
			};
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.tel) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		methods: {
			overpassword(userpassword){  //用户失去密码焦点的时候
			if (userpassword=== '') {
				uni.showModal({
					title: '密码不能为空',
				});
				return false;
			}else{
				var reg = /\S{6,}/;
				if (!reg.test(userpassword)) {
					uni.showModal({
						title: '密码长度必须大于6位',
					});
					return false;
				}
			}
				
			},
			overiphone(registerCode) { //输入手机号码完成的时候
				if (registerCode=== '') {
					callback1(new Error('手机号不可为空'));
					return false;
				} else {
					if (registerCode!== '') {
						var reg = /^1[3456789]\d{9}$/;
						if (!reg.test(registerCode)) {
							callback(new Error('请输入有效的手机号码'));
							return false;
						}
					}
					// callback();
				}

				function callback1(Error) {
					console.log("name", Error);
					uni.showModal({
						title: '手机号码不能为空',
					});
					
				}

				function callback(Error) {
					console.log("name", Error);
					uni.showModal({
						title: '请输入有效的手机号码',
					});
				}

			},

			submit() {
				//发送前进行手机号码校验
				let getbole = this.overiphone(this.registerCode);
				let getpassword =this.overpassword(this.userpassword);
				if(getbole==false||getpassword==false){
					return false;
				}
				uni.request({
					url: 'http://111.229.120.217:8050/sms/' + this.registerCode, //仅为示例，并非真实接口地址。
					method: "GET",
					success: (res) => {
						console.log(res);
						this.selectCode = res.data.data;
					}
				});
				this.second = 300;
				console.log("我点击了提交")
				//输入验证码字段隐藏
				this.isshow = true;
				this.show = false;
				//打开验证码倒计时
				this.newregainshow = true;
				//点击获取验证码之后显示验证码提示框
				this.yzmshow = false;
				let interval = setInterval(() => {
					this.second--;
					if (this.second <= 0) {
						this.show = true;
						this.newregainshow = false;
						
						clearInterval(interval);
					}
				}, 1000);
			}, // 收不到验证码选择时的选择
			noCaptcha() {
				let _this = this;
				uni.showActionSheet({
					itemList: ['重新获取验证码', '接听语音验证码'],
					success: function(res) {
						_this.submit();
					},
					fail: function(res) {

					}
				});
			},
			// change事件侦听
			change(value) {
				//console.log('change', value);
			},
			// 输入完验证码最后一位执行
			finish(value) {
				if (value == this.selectCode) {
					console.log("登陆成功");
					this.error = false;
					
					//验证成功这边跳转到首页，然后账号密码写入数据库
					console.log(this.registerCode);
					console.log(this.userpassword);
					
					
				} else {
					console.log("验证码错误")			
						this.error = true;
				}
			}
		}
	}
</script>
<style lang="less">
	@import url('register.less');

	.getyzms .getregain {

		display: none;

	}

	.yzm {
		display: none;
	}

	wrap {
		padding: 80rpx;
	}

	.box {
		margin: 30rpx 0;
		font-size: 30rpx;
		color: 555;
	}

	.key-input {
		padding: 30rpx 0;

		text {
			display: none;
		}

		.error {
			display: block;
			color: red;
			font-size: 30rpx;
			margin: 20rpx 0;
		}

		.noCaptcha {
			display: block;
		}

		.newregainshow {
			display: block;
		}


	}

	.title {
		font-size: 50rpx;
		color: #333;
	}

	.key-input .tips {
		font-size: 30rpx;
		color: #333;
		margin-top: 20rpx;
		margin-bottom: 60rpx;
	}

	.captcha {

		font-size: 30rpx;
		margin-top: 40rpx;



	}
</style>